<template>
  <div>
         <div class="fenxiao">
        <div class="left">
          <b>|</b>
          分销中心
        </div>
        <button>邀请赚钱</button>
      </div>
      <div class="fen">
        <section>
          <img src="@/assets/wode_32.jpg" alt="" />
          <div class="l2">
            <h2>粉丝</h2>
            <p>0个</p>
          </div>
        </section>
        <section @click="tofenxiao()">
          <img src="@/assets/wode_35.jpg" alt="" />
          <div class="l2">
            <h2>分销订单</h2>
            <p>0个</p>
          </div>
        </section>
      </div>
  </div>
</template>

<script>
export default {
  methods:{
    tofenxiao(){
      this.$router.push('/fenxiao')
    }
  }
}
</script>

<style scoped>
.fenxiao {
  width: 330rem;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 7rem;
  padding-bottom: 10rem;
  border-top: 5rem solid #fafafa;
}
.fenxiao b {
  font-weight: bold;
  color: #de9189;
}
.fenxiao .left {
  font-size: 14rem;
}
.fenxiao button {
  width: 77rem;
  height: 25rem;
  text-align: center;
  line-height: 24rem;
  color: #fff;
  background: #fe6965;
  border-radius: 3rem;
}
.fen {
  width: 330rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10rem;
}
.fen section {
  border-radius: 5rem;
  width: 157rem;
  height: 57rem;
  background: #ebeef3;
  padding-left: 15rem;
  display: flex;
  align-items: center;
}
.fen img {
  width: 40rem;
  height: 40rem;
  margin-right: 7rem;
}
.fen .l2 h2 {
  color: #7d888e;
  margin-bottom: 8rem;
}
</style>